

<template>
  <el-container>
    <el-header>
      <div class="logo">
        <img src="../../assets/logo.gif" style="height: 100%;float: left;display: block" alt=""/>
        <h3 style="width: 65%;height: 100%;line-height: 60px;padding-left:10px;margin-top:0; float: left;">
          医院预约挂号系统</h3>
      </div>
      <div class="nav">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="head">
        <el-dropdown  @command="handleCommand">
                  <span class="el-dropdown-link">
                     <el-avatar shape="square"
                                :src="userinfo?userinfo.picture:''"></el-avatar>
                      <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
            <el-dropdown-item command="logout">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <el-container>
      <el-aside width="210px">
        <!--:router开启el-menu路由模式. 叶子菜单 index路由路径-->
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            :unique-opened="true"
            :router="true">
          <el-menu-item index="/main">
            <i class="el-icon-s-home"></i>
            系统首页
          </el-menu-item>
          <el-submenu v-for = "item in leftMenu" :index="item.id+''">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.label}}</span>
            </template>
            <el-menu-item v-for="child in item.children" :index="child.path">
              <i :class="child.icon"></i>
              {{child.label}}
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <!--视图渲染-->
        <router-view/>
      </el-main>
    </el-container>

  </el-container>
</template>

<script>
export default {
  data(){
    return {
      userinfo:null,
      leftMenu:[],
      buttons:[]
    }
  },
  created(){
    //获取用户信息
    this.getInfo();
    //获取左侧菜单
    this.leftMenus();
    this.getButtons();
  },
  methods:{
//  退出登录
    loginOut(){
      this.$http.get("/userAuth/logout").then(resp=>{
        if(resp.data.code===200){
          this.$message.success(resp.data.data);
          sessionStorage.clear();
          this.$router.push("/login");
        }else {
          this.$message.error("退出失败");
        }
      })
    },


    handleCommand(command) {
      if (command === 'userInfo') {
        this.$router.push('/userInfo')
      } else if (command === 'logout') {
        this.loginOut();
      }
    },
    //用户菜单权限
    leftMenus(){
      this.$http.get("/menu/queryByUserPhone").then(resp=>{
        this.leftMenu=resp.data.data;
      })
    },
    //获取用户按钮权限
    getButtons(){
      this.$http.get("/menu/getButtons").then(resp=>{
        this.buttons=resp.data.data;
      })
    },
    //获取用户信息
    getInfo(){
      this.$http.get("/user/info").then(resp=>{
        if(resp.data.code===200){
          this.userinfo=resp.data.data;
        }
      })
    },
    logout(){
      sessionStorage.clear();
    }
  }
}
</script>

<style scoped>
.el-container {
  height: 100%;
}
.el-header {
  background-color: #ffffff;
  color: black;

}

.el-header > .logo {
  width: 210px;
  height: 100%;
  float: left;
  margin-left: -20px;
}

.el-header > .nav {
  width: 20%;
  height: 100%;
  line-height: 60px;
  float: left;
}

.el-header > .head {
  width: 50%;
  height: 100%;
  float: right;
  text-align: right;
}

span.el-avatar.el-avatar--square {
  margin-top: 10px;
}

.el-breadcrumb {
  line-height: 60px;
}

.el-aside {
  height: 100%;
  background-color: #ffffff;
  color: black;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.el-main {
  background-color: #F8F8FF;
  color: #333;
  border-radius: 5px;
  height: 100%;

}

.el-card__body, .el-main {
  padding: 5px;
}

</style>
